<script setup>
import Footer from "@/components/Footer.vue";
import router from "@/router";
import {user} from "@/stores/counter.js";
import {ElMessage} from "element-plus";
const userInfo = user();

function toAppointmentlist() {
  router.push("/appointmentlist")
}

function toLogin() {
  router.push("/")
}

function toPersonalinfo() {
  router.push("/info")
}

</script>

<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
      <p>个人中心</p>
      <div></div>
    </header>
    <div class="top-ban"></div>

    <section>
      <div class="info" @click="toPersonalinfo">
        <div class="content">
          <img src="../assets/img/user.png">
          <div>
            <p>{{ userInfo.nikcname }}</p>
            <p>账号: {{ userInfo.phone }}</p>
          </div>
        </div>
      </div>
      <ul>
        <li @click="router.push('info')">
          <div class="left">
            <i class="fa fa-user-plus"></i>
            <p>个人信息</p>
          </div>
          <div class="right">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li @click="toAppointmentlist">
          <div class="left">
            <i class="fa fa-user-plus"></i>
            <p>我的预约</p>
          </div>
          <div class="right" @click="toAppointmentlist">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <i class="fa fa-volume-control-phone"></i>
            <p>我的服务</p>
          </div>
          <div class="right">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <i class="fa fa-bed"></i>
            <p>我的医生</p>
          </div>
          <div class="right">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <i class="fa fa-sticky-note"></i>
            <p>问诊订单</p>
          </div>
          <div class="right">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li>
          <div class="left">
            <i class="fa fa-cart-plus"></i>
            <p>商城订单</p>
          </div>
          <div class="right">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
        <li>
          <div class="left" @click="user().logout().then(()=>{ElMessage.success('登出成功');router.push('/login')})">
            <i class="fa fa-sign-out"></i>
            <p>退出登录</p>
          </div>
          <div class="right" @click="toLogin">
            <i class="fa fa-angle-right"></i>
          </div>
        </li>
      </ul>
    </section>

    <div class="bottom-ban"></div>
    <Footer>
    </Footer>
  </div>


</template>

<style scoped>
@import "@/assets/css/personal.css";
@import "@/assets/framework/reset.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
</style>
